import React, { useState, useEffect } from "react";
import contentStyle from './style.module.css'

function TextInput(props) {
  let { list, setList } = props
  function handleSure(e) {
    if (e.keyCode === 13) {
      let newList = [...list]
      if (!e.target.value) {
        alert('请输入任务')
        return
      }
      if (list.find((item) => item.value === e.target.value)) {
        alert('任务已经存在')
        e.target.value = ''
        return
      }
      newList.push({
        value: e.target.value,
        done: false
      })
      setList(newList)
    }
  }
  return (
    <>
      <input className={contentStyle.input} type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyDown={(event) => handleSure(event)} />
    </>
  )
}

function ListComponent(props) {
  let { list, handleDle, handleChangeSelect } = props
  return (
    list.map((item, index) => {
      return (
        <div key={item.value} className={contentStyle.content}>
          <div className={contentStyle.list}>
            <input type="checkbox" checked={item.done} name="1" value={item.value} onChange={e => handleChangeSelect(e, item)} />{item.value}
          </div>
          <button onClick={() => handleDle(item, index)}>删除</button>
        </div>
      )
    })
  )
}
export default function Todolist() {

  const [list, setList] = useState([
    {
      value: '吃饭',
      done: false
    },
    {
      value: '睡觉',
      done: false
    },
    {
      value: '写代码',
      done: false
    },
    {
      value: '逛街',
      done: false
    }
  ])
  const [allCheck, setAllCheck] = useState(false)
  const [slectList, setSlectList] = useState([])
  function handleDle(item, index) {
    if (item === 'all') {
      const newList = list.filter(item => item.done === false)
      setList(newList)
      setSlectList([])
      return
    }
    const newList = JSON.parse(JSON.stringify(list))
    newList.splice(index, 1)
    setSlectList(new Array(slectList.length - 1).fill(0))
    setList(newList)
  }
  function handleSelectChange(e, item) {
    if (e === 'all') {
      setAllCheck((allCheck) => {
        allCheck = !allCheck
        if (allCheck) {
          const checkList = list.map(item => {
            return {
              value: item.value,
              done: true
            }
          })
          setList(checkList)
          setSlectList(list)
        } else {
          const checkList = list.map(item => {
            return {
              value: item.value,
              done: false
            }
          })
          setList(checkList)
          setSlectList([])
        }
        return allCheck
      })
      return
    }
    item.done = !item.done
    let newSlectList = JSON.parse(JSON.stringify(list))
    setList(newSlectList)
    const checkList = newSlectList.filter((item) =>
      item.done === true
    )
    setSlectList(checkList)
  }
  return (
    <>
      <TextInput list={list} setList={setList} />
      <ListComponent list={list} handleDle={handleDle} handleChangeSelect={handleSelectChange} />
      <div className={contentStyle.footer}>
        <div>
          <input type="checkbox" name="1" value="all" checked={allCheck} onChange={e => handleSelectChange('all')} />
          {`已完成 ${slectList.length}/全部${list.length}`}
        </div>
        <button className={contentStyle.button} onClick={e => handleDle('all')}>清除已完成任务</button>
      </div>
    </>
  )
}